<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport"
          content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="description" content="刮刮卡">
    <title>刮刮卡</title>
    <link href="${ctx}/static/mobileweb/game/1/activity-style.css?_=${.now?string('yyyy-MM-dd')}" rel="stylesheet" type="text/css">
</head>

<script type="text/javascript">
    function loading(canvas, options) {
        this.canvas = canvas;
        if (options) {
            this.radius = options.radius || 12;
            this.circleLineWidth = options.circleLineWidth || 4;
            this.circleColor = options.circleColor || 'lightgray';
            this.moveArcColor = options.moveArcColor || 'gray';
        } else {
            this.radius = 12;
            this.circelLineWidth = 4;
            this.circleColor = 'lightgray';
            this.moveArcColor = 'gray';
        }
    }
    loading.prototype = {
        show: function () {
            var canvas = this.canvas;
            if (!canvas.getContext)return;
            if (canvas.__loading)return;
            canvas.__loading = this;
            var ctx = canvas.getContext('2d');
            var radius = this.radius;
            var me = this;
            var rotatorAngle = Math.PI * 1.5;
            var step = Math.PI / 6;
            canvas.loadingInterval = setInterval(function () {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                var lineWidth = me.circleLineWidth;
                var center = {x: canvas.width / 2, y: canvas.height / 2};

                ctx.beginPath();
                ctx.lineWidth = lineWidth;
                ctx.strokeStyle = me.circleColor;
                ctx.arc(center.x, center.y + 20, radius, 0, Math.PI * 2);
                ctx.closePath();
                ctx.stroke();
                //在圆圈上面画小圆
                ctx.beginPath();
                ctx.strokeStyle = me.moveArcColor;
                ctx.arc(center.x, center.y + 20, radius, rotatorAngle, rotatorAngle + Math.PI * .45);
                ctx.stroke();
                rotatorAngle += step;

            }, 100);
        },
        hide: function () {
            var canvas = this.canvas;
            canvas.__loading = false;
            if (canvas.loadingInterval) {
                window.clearInterval(canvas.loadingInterval);
            }
            var ctx = canvas.getContext('2d');
            if (ctx)ctx.clearRect(0, 0, canvas.width, canvas.height);
        }
    };
</script>
</head>
<script src="${ctx}/static/mobileweb/game/1/jquery.min.js" type="text/javascript"></script>

<body data-role="page" class="activity-scratch-card-winning">
<script src="${ctx}/static/mobileweb/game/1/wScratchPad.js" type="text/javascript"></script>


<div class="main">
    <div class="cover">
        <img src="${ctx}/static/mobileweb/game/1/activity-scratch-card-bannerbg.png">
        <div id="prize"></div>
        <div id="scratchpad"></div>
    </div>

    <div class="content">
        <div class="boxcontent boxyellow" id="checkGame" style="display:none">
            <div class="box">
                <div class="title-brown"><span>&nbsp;提醒</span></div>
                <div class="Detail">
                    <p id="checkmsg"></p>
                    <a style="text-decoration: none;" class="pxbtn" href="${ctx}/mobileweb/game?mid=${mid!}&wxno=${wxno!}">返回游戏列表</a>
                    <#--<input class="pxbtn" id="back-btn" name="back-btn" type="button" value="返回游戏列表">-->
                </div>
            </div>
        </div>

        <div id="zjl" style="display:none" class="boxcontent boxwhite">
            <div class="box">
                <div class="title-brown"><span id="win_tip"></span></div>
                <div class="Detail">
                    <p>你中了：<span class="red" id="prize2"></span></p>
                    <p>兑奖SN码：<span class="red" id="sncode"></span></p>
                    <p class="red"></p>
                    <p>
                    <input class="pxbtn" name="reloadbtn" id="reloadbtn" type="button" value="点击重新开始">
                    </p>
                </div>
            </div>
        </div>
        <div class="boxcontent boxwhite">
            <div class="box">
                <div class="title-brown"><span>奖项设置：</span></div>
                <div class="Detail">
                <#list gameAwardses as ga>
                    <p>
                        ${ga.awardsName}： ${ga.giftName}。
                        <#if ga.awardsSize?? && ga.awardsSize != 0>
                            奖品数量：${ga.awardsSize}
                        </#if>
                    </p>
                </#list>
                </div>
            </div>
        </div>
        <div class="boxcontent boxwhite">
            <div class="box">
                <div class="title-brown">活动说明：</div>
                <div class="Detail">
                    <p class="red">
                    <#if gameRule.free_times??>
                        刮刮乐游戏每日可以免费玩${gameRule.free_times}次,如果免费次数没用完重新进入本页面可以再玩!
                    </#if>
                        你今天已经玩了${todayPlayTimes!}次
                    </p>
                    <p> ${game.remark!} </p>
                </div>
            </div>
        </div>
    </div>
    <div style="clear:both;"></div>
</div>
<#--<script src="${ctx}/static/mobileweb/game/1/alert.js" type="text/javascript"></script>-->

<script type="text/javascript">
    window.sncode = "";//这里写的中奖序号
    window.prize = "";//这里写的是所中的奖级
    var zjl = true;//中没中奖就看这个变量 true 就是中奖了 false 自己理解.......
    var num = 0;
    var goon = true;
    var failTip = ['再接再厉', '谢谢参与', '祝您好运'];


    var todayPlayTimes = ${todayPlayTimes};
    var freeTimes = ${gameRule.free_times};

    var consume = "${gameRule.consume?string('true', 'false')}";
    var integral = "${member.integral!}";
    var useIntegral = "${gameRule.useIntegral!}";

    var useVirtualCurrency = "${gameRule.use_virtual_currency?string('true', 'false')}";
    var currency = "${member.currency!}";
    var virtualCurrency = "${gameRule.virtual_currency!}";

    var continueGame = false;

    function checkGame() {
        if (freeTimes<=todayPlayTimes) {
            var lessIntegral = false;
            var lessCurrency = false;
            if (useVirtualCurrency === "true") { //可以使用中南币
                if (currency>=virtualCurrency) { //可以扣减
                    $("#checkmsg").html("您已经没有免费机会，本次游戏需要扣" + virtualCurrency + "中南币，继续游戏将会自动扣减!");
                    continueGame = true;
                    $("#checkGame").slideToggle(500);
                    return;
                } else {
                    lessCurrency = true;
                }
            }

            if (consume === "true") { //可以使用积分
                if (integral >= useIntegral) { //当前积分满足使用积分
                    $("#checkmsg").html("您已经没有免费机会，本次游戏需要扣" + useIntegral + "积分，继续游戏将会自动扣减!");
                    continueGame = true;
                    $("#checkGame").slideToggle(500);
                    return;
                } else {
                    lessIntegral = true;
                }
            }

            if (consume === "true" && useVirtualCurrency === "true") { //可以使用积分和中南币
                if (lessIntegral && lessCurrency) {
                    $("#checkmsg").html("对不起，您的积分，中南币不够玩本次游戏。");
                    continueGame = false;
                }
            } else {
                if(lessIntegral){ //尝试使用过积分，积分不够
                    $("#checkmsg").html("对不起，您的积分不够玩本次游戏。");
                    continueGame = false;
                } else if(lessCurrency) {//尝试使用过中南币，积分不够
                    $("#checkmsg").html("对不起，您的中南币不够玩本次游戏。");
                    continueGame = false;
                } else {//计算错误
                    $("#checkmsg").html("没有免费次数了，明天继续吧。");
                    continueGame = false;
                }
            }
            $("#checkGame").slideToggle(500);
        } else {
            continueGame = true;
        }
    }

    $(function () {
        checkGame();

        $("#scratchpad").wScratchPad({
            width: 94,
            height: 31,
            color: "#a9a9a7",
            scratchMove: function () { //刮奖动作，在这里进行后台数据传输处理
                /*if (!checked) {
                    checkGame();
                }*/
                if (!continueGame) {
                    return;
                }
                $("#checkGame").slideUp(200);
                num++;
                if (num == 2) {
                    $.ajax({
                        type: 'POST',
                        url: "${ctx}/mobileweb/game/dispose",
                        data: "mid=${mid!}&wxno=${wxno}&gid=${game.id!}",
                        async: false,
                        success : function(data) {
                            if (data.status == "OK") { //中奖
                                document.getElementById('prize').innerHTML = data.data.awardName;
                                document.getElementById('prize2').innerHTML = data.data.awardName;
                                if (data.data.accept == 1) {
                                    $('#sncode').parent().hide();
                                } else {
                                    document.getElementById('sncode').innerHTML = data.data.sncode;
                                }
                                $('#win_tip').html("&nbsp;恭喜你")
                            } else {
                                var ii = Math.floor(Math.random()*3);
                                document.getElementById('prize').innerHTML = failTip[ii];
                                $('#prize2').parent().html(data.message);
                                $('#sncode').parent().html("");
                                $('#win_tip').html("&nbsp;很遗憾")
                            }
                        }
                    });
                }

                if (zjl && num > 5 && goon) {
                    goon = false;
                    $("#zjl").slideToggle(500);
                    $("#ga").slideUp(500);
                }

            }
        });

        $("#reloadbtn").click(function() {
            window.location.reload();
        });
    });

</script>
</body>
</html>